<template>
    <div class="huxing">
        <div class="header_ding">
            <mt-header class="yan" title="全部户型">
                <img @click="tiao" class="zuo_jian" src="../aimg/zuo.png" alt="" slot="left">
            </mt-header>

            <div class="start_kai">      
                <span  class="span_qu" v-if="abc" @click="load">全部区域
                    <img src="../aimg/xia.png" alt="">
                </span>
                <span class="span_qu2"  v-else @click="load2">全部区域
                    <img src="../aimg/shang.png" alt="">
                </span>
                <div class="a1"><a href="#">距离</a></div>
                <span class="span_pic">
                    价格
                    <img class="img_a" src="../aimg/shanghei.png"><br>
                    <img class="img_i" src="../aimg/xia.png" alt="">
                </span>
                <span class="sai_xuan">
                    筛选
                    <img src="../aimg/xia.png" alt="">
                </span>
            </div>
        </div><br><br><br><br>
        <div v-for="(item,i) of list" :key="i" >
            <div class="dian"  @click="goto(item.eid)">
                <img class="dianpic" :src="require(`../../public/img/huxin/${item.other1}`)" alt="">
                <div class="neirong">
                    <span class="mingzi">{{item.orientation}}</span><br>
                    <span class="didian">{{item.addres}}</span><br>
                    <span class="house_ge">{{item.house}}</span><br>
                    <span class="area_mian">{{item.area}}</span>

                    <div class="jiage">
                        <span>{{item.price}}</span>
                        <span>元/月起</span>
                    </div>
                </div>  
            </div>           
            <div class="border_bottom"></div>            
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                list:"",              
                abc:true
            }
        },
        methods:{
            tiao(){
                 this.$router.push("/")
            },
            goto(eid){
                this.$router.push(`/huxiang/${eid}`)
            },
            load(){
                this.abc=false;
            },
            load2(){
                this.abc=true;
            },
            loadPage(){
                this.axios.get("/house_structure/v1/search"
                ).then(res=>{
                    console.log(res.data);
                    this.list=res.data;
                    // console.log(res.data[0].iscore.split("元")[0]);                  
                    // console.log(res.data[0].iscore.slice(0,5))
                })
            }
        },
        mounted(){
            this.loadPage();
        }
    }
   
</script>

<style scoped>
*{margin: 0;padding: 0;}
.header_ding{
    position: fixed;
    width: 100%; height: 59px;
    top:0;
    background-color: white;
}
.yan{
    background-color: white;
    color: black;
    font-size: 16px;
}
.zuo_jian{
    width: 25px;height: 25px;
}
.start_kai{
    display: flex;
    width: 100%;
    /* margin-bottom: 10px; */
    justify-content: space-between;
}
.span_qu{
    font-size: 12px;
    margin-left: 15px;
    margin-top: 3px;
}
.span_qu>img{
    width: 12px;
    margin-top: -4px;
}
.sai_xuan>img{
    width: 12px;
    margin-top: -4px;
    margin-left: 5px;
    margin-right: 10px;
}
.span_qu2{
    font-size: 12px;
    margin-left: 14px;
    color: rgb(255, 126, 79);
    margin-top: 3px;
}
.span_qu2>img{
    width: 12px;
    margin-top: -5px;

}
.a1 a{
    color: black;
    font-size: 12px;
}

.span_pic{
    font-size: 12px;
    margin-top: 3px;

}
.img_a{
    width: 10px;
    height: 15px;
    margin-top: -8px;
    margin-right: 15px;
}
.img_i{
    width: 10px;
    height: 15px;
    margin-top: -18px;
    margin-left: 27px;
}
.sai_xuan{
    font-size: 12px;
    margin-top: 3px;
    /* position: fixed; */
    

}
.dian{
    /* margin-left: 2px; */
    width: 100%;height: 72px;
    display: flex;
    margin-top: 9px;
}
.neirong{
    margin-left: 10px;
}
.dianpic{
    width: 108px !important;
    /* height: 100%; */
    margin-left: 12px;
    border-radius: 5px;
    margin-top: 4px;
}
.mingzi{
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    /* margin-left: 0px; */
}
.didian{
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    /* margin-left: 3px; */
    margin-top: 8px;
}
.house_ge{
    color:#7c7b7b;
    font-size: 13px;
    display: inline-block;
    /* margin-left: 3px; */
    margin-top: 7px;
}
.area_mian{
    color:#7c7b7b;
    font-size: 10px;
    display: inline-block;
    /* margin-left: 3px; */
    margin-top: 6px;
}
.jiage :nth-child(1){
    color: coral;
    font-weight: 800;
    font-size: 18px;
}
.jiage :nth-child(2){
    font-size: 12px;
    color: dimgrey;
    margin-left: 3px;

}
.jiage{
    margin-left: 98px;
    margin-top: -15px;
}
.border_bottom{
    height: 1px;width: 100%;
    border-bottom: 1px solid rgb(243, 239, 239);
    /* position: fixed; */
    margin-top: 15px;    
    /* display: none; */
  }
</style>